<template>

<!-- -->
  <div class="basic-container">
    <div class="basic-container-inner" v-if="infoObj">
      <div class="detail-title">
        <div class="title-base">{{ infoObj.examName }}</div>
        <div class="tags kaohe-tags">考核</div>
      </div>
      <div class="detail-inner">
        <div class="detail-inner-box">
          <div class="detail-inner-box-left">
            <div class="title" @click="aaa">
              题目详情
            </div>
            <div class="content-box">
              <div class="video-box">

                <videoPlay
                  width="100%"
                  height="100%"
                  ref='videoPlayer'
                  muted
                  @timeupdate="timeupdateFun"
                  :src="infoObj.videoUrl"/>
              </div>
              <div class="video-des">
                <div class="list-des">上传人：{{ infoObj.userName }}</div>  
                <div class="list-des">上传时间：{{ infoObj.creatTime }}</div>  
                <div class="list-des">视频时长：{{ infoObj.videoTime }}s</div>  
                <div class="list-des">佣金：暂无哦</div>
              </div>
              <div class="content-detail-box">
                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  题干
                </div>
                <div class="detail-box-des" v-if="examText"> {{ examText }}</div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>
                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  重要知识点
                </div>
                <div class="detail-box-des" v-if="pointsLists.length > 0">
                  <div v-for="(item,index) in pointsLists" :key="index">
                    <p style="font-size: 14px;font-weight: 600;">{{index + 1}}、{{ item.title }}</p>
                    <p>{{item.content }}</p>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>

                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  评分卡
                </div>
                <div class="detail-box-des" v-if="scoreCardLists.length > 0">
                  <div class="point-box">
                    <div
                      class="point-list flex"
                      v-for="(item, index) in scoreCardLists"
                      :key="index"
                    >
                      <div class="point-des">{{ item.scoringCriteria }}</div>
                      <div :class="'flex-center point-current point-current' + item.point">{{ item.score }}分</div>
                    </div>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>

                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  自检卡
                </div>
                <div class="detail-box-des" v-if="selfInspectionCardLists.length > 0">
                  <div class="point-box">
                    <div
                      class="point-list flex selfBg"
                    >
                      <div class="point-des" style="padding-left: 4px;">物资物品</div>
                      <div :class="'flex-center point-current point-current'">数量</div>
                    </div>
                    <div
                      class="point-list flex"
                      v-for="(item, index) in selfInspectionCardLists"
                      :key="index"
                    >
                      <div class="point-des">{{ item.specificRequirement }}</div>
                      <div :class="'flex-center point-current point-current' + item.point">{{ item.count }}</div>
                    </div>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>

                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  提示卡
                </div>
                <div class="detail-box-des" v-if="cueCardLists.length > 0">
                  <div
                    class="details-list"
                    v-for="(item, index) in cueCardLists"
                    :key="index"
                  >
                    <div class="details-title">{{ item.cueContent }}</div>
                    <div>
                      <!-- <div class="details-des">{{ item.examText }}</div> -->
                      <!-- <div class="details-des" v-for="(items, indexs) in item.desArr" :key="indexs">{{ items }}"</div> -->
                    </div>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>
              </div>
            </div>
          </div>
          <div class="detail-inner-box-left detail-inner-box-right">
            <div class="title">
              评分项 
            </div>
            <div class="content-box content-box2">
              <div class="box-top">
                <div class="title-inner">判断标准</div>
                <div class="manFen">满分</div>
                <div class="shiJiDeFen">
                  实际得分
                </div>
              </div>
              <div class="box-middle">
                <div class="middle-list" v-for="(item,index) in scoreCardLists" :key="index">
                  <div class="title-inner">{{ item.scoringCriteria }}</div>
                  <div class="manFen">{{ item.score }}分</div>
                  <div class="shiJiDeFen">
                    <a-input-number v-model:value="item.result" :max="item.score"  :min="0" placeholder="得分" style='text-align: center;'/>
                  </div>
                </div>
              </div>
              <div class="box-bottom">
                <div class="box-bottom-btn">
                  <a-button @click="noPointsHandle" size="large" shape="round" style="margin-right: 10px;">未评项置零</a-button>
                  <a-button @click='allPointsHandle' type="primary" ghost size="large" shape="round">未评项满分</a-button>
                </div>
                <div class="box-bottom-score">
                  <div class="total">总分： {{ allScore }}分</div>
                  <div>
                    <span>{{ isPointed }}</span>
                    <span class="total-timu">/{{ scoreCardLists.length }} (总{{ matchScore }}分)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-btn">
        <a-button type="primary" size="large" shape="round" @click="submit">提交考核</a-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { examRecordsList ,examinationList,examPointsList,scoreCardList,selfInspectionCardList,cueCardList,examRecordsDetailSaveListPC } from '@/api/model/exam';
  import { message } from 'ant-design-vue';
  import 'vue3-video-play/dist/style.css'
  import { videoPlay } from 'vue3-video-play'
  import Recorder from 'js-audio-recorder'
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  import axios from 'axios'
  export default{
    components: {
      videoPlay
    },
    computed: {
      isPointed() {
        let aaa = this.scoreCardLists.filter(val => {
          return val.result !== null
        })
        return aaa.length
      },
      allScore() {
        let scoreBak = 0
        this.scoreCardLists.map(val => {
          if (val.result !== null) {
            scoreBak += Number(val.result)
          }
        })
        return scoreBak.toFixed(1)
      },
      matchScore() {
        let scoreBak = 0
        this.scoreCardLists.map(val => {
          scoreBak += Number(val.score)
        })
        return scoreBak.toFixed(1)
      }
    },
    data(){
      return{
        id: '',
        infoObj: {},
        list:[],
        timeLengths: [20,40,60,90,120],
        activeTime: 20,
        currentTime: 0, //
        page:{
          current: 1,
          pageSize: 10,
          total: 0,
        },

        
        examText: '',// 题干
        pointsLists: [], // 知识点
        scoreCardLists:[], //评分卡
        selfInspectionCardLists:[], //自检卡
        cueCardLists: [],//提示卡
      }
    },
    created(){
      this.id = this.$route.query.id
      this.recorder = new Recorder()
      this.getInfoHandle()

    },
    methods:{
      // 未评置 满分
      allPointsHandle() {
        this.scoreCardLists.map(val => {
          if (val.result == null) {
            val.result = val.score
          }
        })
      },
      // 未评置 0
      noPointsHandle() {
        this.scoreCardLists.map(val => {
          if (val.result == null) {
            val.result = 0
          }
        })
      },
      submit(){
        let params = {
          studyExamRecords: {
            id: this.id,
            result: Number(this.allScore).toFixed(2),
					  examTotalScore: Number(this.matchScore),
          }
        }
        this.scoreCardLists.map(val=>{
          val.scoreCardId = val.id
          val.userId = this.infoObj.userId,
          val.examName = this.infoObj.examName,
          delete val.id
        })
        params.studyExamRecordsDetail = JSON.parse(JSON.stringify(this.scoreCardLists))
        console.log(params)
        console.log(JSON.stringify(params))
        examRecordsDetailSaveListPC(params).then(res=>{
          message.success('提交考评成功')
          console.log(res)
          
        })
        console.log(this.scoreCardLists)
      },
      // 获取习题详情
      getExaminationList(id){
        examinationList({id:id}).then(res=>{
          this.examText = res.data.records[0].examText
        })
      },
      // 获取知识点
      getExamPointsList(id){
        examPointsList({id:id}).then(res=>{
          this.pointsLists = res.data.records
        })
      },
      // 获取评分卡
      getScoreCardList(id){
        scoreCardList({id:id}).then(res=>{
          this.scoreCardLists = res.data.records
          this.scoreCardLists.map(val=>{
            val.result = null
          })
        })
      },
      // 获取自检卡
      getSelfInspectionCardList(id){
        selfInspectionCardList({id:id}).then(res=>{
          this.selfInspectionCardLists = res.data.records
        })
      },
      // 获取提示卡
      getCueCardList(id){
        cueCardList({id:id}).then(res=>{
          this.cueCardLists = res.data.records
        })
      },
      timeupdateFun(ev){
        console.log(ev.target.currentTime.toFixed(2))
      },
      translateTime(timeStr) {
        let minute = Math.floor((timeStr % 3600) / 60) > 9 ? Math.floor((timeStr % 3600) / 60) : '0' + Math.floor((timeStr % 3600) / 60)
        let second = Math.floor(timeStr % 60) > 9 ? Math.floor(timeStr % 60) : '0' + Math.floor(timeStr % 60)
        return `${minute}:${second}`
      },
      // 视频详情
      getInfoHandle () {
        let params = {
          id: this.id
        }
        examRecordsList(params).then(res=>{
          this.infoObj = res.data.records[0]
          this.getExaminationList(this.infoObj.examinationId)
          this.getExamPointsList(this.infoObj.examinationId)
          this.getScoreCardList(this.infoObj.examinationId)
          this.getSelfInspectionCardList(this.infoObj.examinationId)
          this.getCueCardList(this.infoObj.examinationId)
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  p{
    margin: 0;
    padding: 0;
  }

  .basic-container{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    background: var(--osce-background-grey);

    .basic-container-inner{
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: auto;

      .detail-title{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 1152px;
        height: 64px;
        margin: 0 auto;

        .title-base{
          font-size: 24px;
          font-weight: 600;
        }

        .tags{
          height: 21px;
          margin-left: 10px;
          padding: 12px;
          padding: 0 6px;
          border-radius: 2px;
          background: rgb(253 139 8 / 30%);
          font-size: 12px;
          line-height: 21px;
        }

        .kaohe-tags{
          background: rgb(0 187 204 / 30%);
        }
      }

      .detail-inner{
        display: flex;
        flex: 1;
        width: 100%;
        margin-bottom: 20px;
        overflow: auto;

        .detail-inner-box{
          display: flex;
          justify-content: space-between;
          width: 1152px;
          margin: 0 auto;
          overflow: auto;

          .detail-inner-box-left{
            display: flex;
            flex-direction: column;
            width: 610px;
            height: 100%;
            overflow: auto;
            border-radius: 12px;
            background: var(--osce--background-color);

            .title{
              padding: 20px 0 12px;
              border-bottom: 1px solid var(--osce--border-color);
              font-size: 17px;
              font-weight: 600;
              text-indent: 20px;
            }

            .content-box{
              flex: 1;
              width: 100%;
              padding: 16px 20px;
              overflow: auto;

              .video-box{
                width: 100%;
                height: 320px;
                border-radius: 6px;
                background: rgb(184 215 208);

                video{
                  width: 100%;
                  height: 100%;
                }
              }

              .video-des{
                margin-bottom: 12px;
                padding: 12px 0 6px;
                border-bottom: 1px solid var(--osce--border-color);

                .list-des{
                  padding-bottom: 8px;
                  color: var(--osce--gray-color);
                  font-size: 12px
                }
              }

              .content-detail-box{
                .detail-box-title{
                  padding-top: 16px;
                  font-size: 15px;
                  font-weight: 600;
                  line-height: 32px;

                  .iconfont {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 6rpx;
                    background: linear-gradient(90deg, #0c9 0%, #007acc 100%);
                    background-clip: text;
                    font-size: 44rpx;
                    -webkit-text-fill-color: transparent;
                  }
                }

                .detail-box-des{
                  font-size: 13px;
                  font-weight: 400;
                  line-height: 20px;
                }

                .detail-box-des-noData{
                  height: 40px;
                  color: var(--osce--gray-color);
                  font-size: 12px;
                  line-height: 40px;
                  text-align: center;
                }

                .point-list{
                  padding: 10px 0;
                  border-bottom: 1px solid var(--osce--border-color);

                  .point-des {
                    flex: 1;
                    padding-right: 15px;
                  }

                  .point-current {
                    width: 40px;
                    height: 24px;
                    border-radius: 2px;
                    color: var(--osce--gray-color);
                    font-size: 12px;
                    line-height: 21px;
                  }
                }

                .selfBg{
                  background: var(--osce--border-color);
                }
              }
            }

            .content-box2{
              display: flex;
              flex-direction: column;

              .box-top{
                display: flex;
                height: 33px;
                padding: 0 10px;
                background: var(--osce--border-color);
                color:var(--osce--gray-color);
                font-size: 12px;
                line-height: 33px;

                .title-inner{
                  flex: 1;
                }

                .manFen{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 54px;
                  text-align: center;
                }

                .shiJiDeFen{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 64px;
                  text-align: center;
                }
              }

              .box-middle{
                flex: 1;
                overflow: auto;

                .middle-list{
                  display: flex;
                  padding: 10px;
                  border-bottom: 1px solid var(--osce--border-color);

                  .title-inner{
                    flex: 1;
                  }

                  .manFen{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 54px;
                    text-align: center;
                    
                  }

                  .shiJiDeFen{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 64px;
                    text-align: center;

                  }
                }
              }

              .box-bottom{
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                padding: 20px 0 0;
                border-top: 1px solid var(--osce--border-color);

                .box-bottom-score{
                  display: flex;
                  flex-direction: column;
                  align-items: flex-end;
                  justify-content: flex-end;

                  .total{
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 29px;
                  }

                  .total-timu{
                    color: var(--osce--gray-color);
                  }
                }
              }
            }
          }

          .detail-inner-box-right{
            width: 500px;
            height: 100%;
          }
        }
      }

      .detail-btn{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 1152px;
        height: 60px;
        margin: 0 auto;
        padding-right: 20px;
        border-radius: 10px 10px 0 0 ;
        background: var(--osce--background-color);
      }
    }
  }
</style>